<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="考勤打卡"></u-navbar>

		<view class="d-p-30">
			<view class="card d-flex d-col-bottom">
				<u--image radius="10rpx" :src="$user.profile || '/static/image/photo.png'" width="160rpx" height="160rpx"></u--image>
				<view class="d-flex-1 d-p-l-30" style="position: relative;">
					<view class="d-font-36" style="font-weight: bold; color: #151C24;">{{ $user.userName }}</view>
					<view class="d-font-24 d-m-t-30" style="color: #151C24;">
						<text>班组</text>
						<text class="d-m-l-30">{{ $user.ssgcxx[$appIndex].bzmc }}</text>
					</view>
					<!-- <view style="position: absolute;right: 0rpx;top: -30rpx;"><u-button text="申请补卡" type="info" shape="circle" size="mini" @click="makeCard"></u-button></view> -->
				</view>
			</view>

			<view class="card d-p-30 d-m-t-30" v-if="info">
				<view class="d-flex">
					<view class="d-flex-1 item" :class="status == 1 ? 'sel' : ''" @click="setStatus(1)">
						<view class="d-font-28 t" style="font-weight: bold;">入场时间 {{ info[0].amworkon }}</view>
						<view class="d-font-24 d d-m-t-10" style="font-weight: bold;" v-if="info[0].zzjcsj">打卡时间 {{ $moment(info[0].zzjcsj).format('HH:mm') }}</view>
						<view class="d-font-24 d d-m-t-10" style="font-weight: bold;" v-else>未打卡</view>
					</view>
					<view class="d-flex-1 item d-m-l-30" :class="status == 2 ? 'sel' : ''" @click="setStatus(2)">
						<view class="d-font-28 t" style="font-weight: bold;">出场时间 {{ info[0].pmworkoff }}</view>
						<view class="d-font-24 d d-m-t-10" style="font-weight: bold;" v-if="info[0].zwccsj">打卡时间 {{ $moment(info[0].zwccsj).format('HH:mm') }}</view>
						<view class="d-font-24 d d-m-t-10" style="font-weight: bold;" v-else>未打卡</view>
					</view>
				</view>

				<view style="height: 400rpx;padding-top: 150rpx;">
					<view @click="signAuth" class="d-font-36 d-flex sign d-row-center" :class="!status ? 'dis' : ''" style="color: #FFFFFF;font-weight: bold;">打卡</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getDkDate } from '../../../common/api.js';
export default {
	data() {
		return {
			info: null,
			status: null
		};
	},
	onShow() {
		this.status = null;
		getDkDate({
			params: {
				gcbh: this.$user.ssgcxx[this.$appIndex].gcbh,
				bzid: this.$user.ssgcxx[this.$appIndex].bzid,
				rybh: this.$user.ssgcxx[this.$appIndex].rybh, // 人员id
			}
		})
			.then(e => {
				if (!e.data || e.data.length == 0) {
					let app = this.$user.ssgcxx[this.$appIndex];
					uni.$u.toast('【' + app.gcmc + '】-【' + app.bzmc + '】未设置考勤规则，无法打卡；');
				} else {
					this.info = e.data;
					if (!this.info[0].zzjcsj) {
						this.setStatus(1);
					} else if (!this.info[0].zwccsj) {
						this.setStatus(2);
					}
				}
			})
			.catch(e => {
				console.error(e);
				uni.$u.toast('接口错误!');
			});
	},
	methods: {
		// makeCard() {
		// 	uni.$u.route({
		// 		url: '/pages/index/work/makeCard'
		// 	});
		// },
		signAuth() {
			if (!this.status) {
				return uni.$u.toast('请选择打卡时间');
			}
			uni.$u.route({
				url: '/pages/index/work/signAuth',
				params: {
					status: this.status
				}
			});
		},
		setStatus(e) {
			if (e == 1) {
				if (!this.info[0].zzjcsj) {
					this.status = 1;
				} else {
					uni.$u.toast('该时间已打过卡了');
				}
			} else {
				if (!this.info[0].zwccsj) {
					this.status = 2;
				} else {
					uni.$u.toast('该时间已打过卡了');
				}
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
	.card {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		.item {
			height: 143rpx;
			background: #f6f7f8;
			border-radius: 10rpx;
			padding: 30rpx 0 0 30rpx;
			box-sizing: border-box;
			.d {
				color: #adb4bd;
			}
			.t {
				color: #162233;
			}
			&.sel {
				background-color: #21a5f3;
				.d {
					color: #ffffff;
				}
				.t {
					color: #ffffff;
				}
			}
		}

		.sign {
			width: 286rpx;
			height: 286rpx;
			background: linear-gradient(140deg, #47bbff 0%, #21a5f3 100%);
			box-shadow: 0rpx 3rpx 20rpx rgba(33, 165, 243, 0.4);
			border-radius: 50%;
			margin: auto;

			&.dis {
				background: #b6babc;
				box-shadow: 0rpx 3rpx 20rpx rgba($color: #b6babc, $alpha: 0.4);
			}
		}
	}
}
</style>
